QuickGrid in .NET 7 Blazor is awesome

As a part of DotNetConf the new version 7 of .NET was revealed. As always, Microsoft had a lot of exiciting news. One of the things that really caught my eye was some of the new stuff they added to Blazor. I was lucky to work with Blazor server on my last contract and I have to say that I was immensely impressed with Microsofts 'answer' to the other frontend frameworks like React, Angular and Vue. 

Steven Sanderson had a very interesting talk about some of the new features that has been implemented in Blazor in .NET 7. Most of the new features work in all three flavours of Blazor (server, WebAssembly (aka WASM) and .NET Maui). Especially one of the new features is the QuickGrid, which solves a problem that many developers has tried solving many times during their carreer: showing tabular data in a search table with pagination.

A quick disclaimer: Even though QuickGrid technically is a part of .NET 7 it is not officially released. It's only in public preview and the API might change a little bit before it is fully launched. So if you want to play around with it, you need to install one of the daily builds of version 7.0.2xx on the dotnet Github page. It will also require the latest version of Visual Studio. 

The QuickGrid component allows you to create a sortable table with pagination in a matter of minutes. But let's take a look at the different part of the code. 

<Paginator Value="@pagination" />

<QuickGrid Items="@products" Pagination="@pagination">

    <PropertyColumn Property="@(p => p.Category.CategoryName)" Sortable="true" />

    <PropertyColumn Property="@(p => p.Supplier.CompanyName)" Sortable="true" />

    <PropertyColumn Property="@(p => p.ProductName)" Sortable="true">

        <ColumnOptions>

            <input @bind="@filter" placeholder="Search..." class="form-control" autofocus

                   @bind:event="oninput"

                   @bind:after="UpdateFilter" />

        </ColumnOptions>

    </PropertyColumn>

</QuickGrid>

 

@code {

    [Inject]

    public IProductRepository? ProductsRepository { get; set; }

 

    private IQueryable<Product>? products;

    private PaginationState pagination = new PaginationState { ItemsPerPage = 30 };

    private string? filter;

 

    protected override void OnInitialized()

    {

        UpdateFilter();

    }

 

    private void UpdateFilter()

    {

        products = ProductsRepository?.SearchProducts(filter);

    }

}

The QuickGrid component is obviously the main thing here. The Items property points to the collection of items that should be handled by the QuickGrid. This must be of the type IQueryable<T> where T is the type of objects. The Pagination property should be hooked up to a PaginationState, which is new'ed up in the class, with a variable telling it to have 30 items pr. page. Please note that the Pagination is not required. If the QuickGrid should show all the entries in the Items property, the Pagination property can be omitted. 

A PropertyColumn is added for each column that should be shown in the table. The most basic PropertyColumn has a lambda expression pointing to the property that should be shown and the Sortable property determines if the column should be sortable or not.

If it is required to have a bit more flexibility with the column, it is possible to add a ColumnOptions element under a PropertyColumn. Here it is possible to add markup and/or components that should be shown. In the code example a search box will appear when you click the small icon on the header, where you can filter the contents of the table. 

The filtering leverages one of the new 'bind-enhancements' which is also a part of .NET 7. The @bind:after property will point to a method that will be fired each time the variable that the input is bound to (using the @bind parameter) has been updated. So each time the user has entered a new letter in the filter text box UpdateFilter will be called, which will update the list of products, that should be shown in the table. 

Pretty need, huh?